<!--
 * @description:
 * @author: huangpeng
 * @date: 2023年07月16日 22:41
 * @Copyright:  2022-2023
!-->
<template>
  <div class="article-list-container">
    <div class="article-list-container-main">
      <el-card v-for="(item, index) in articleList" :key="index" class="article-card">
        <div class="article-main">
          <div v-if="item.blogImage" class="article-cover">
            <router-link :to="'/info/'+item.id">
              <img :src="item.blogImage" class="article-img" alt="">
            </router-link>
          </div>
          <router-link :to="'/info/'+item.id" :class="item.blogImage ? 'article-container' : 'article-container-cover-none'">
            <div class="article-title">{{ item['blogTitle'] }}</div>
            <div class="article-remark">
              {{ item['blogRemark'] }}
            </div>
          </router-link>
          <div class="article-type">
            <span @click="handleSearch(item)">{{ item['typeName'] }}</span>
          </div>
        </div>
        <div class="article-bottom">
          <div class="article-tag-mark">
            <!-- 作者 -->
            <div class="article-author">
              <el-image
                :src="item.user.avatar"
                :alt="item.user.userName"
                fit="cover"
                class="user-avatar"
                @click="handleUserCard(item.user.id)"
              />
              <span class="demonstration">{{item.user.userName}}</span>
              <span> <svg-icon icon-class="time"/>{{ formatToSubDay(item['createTime']) }}前&nbsp;&nbsp;</span>
            </div>
            <!-- 标签 -->
            <div v-if="item.tagList.length > 0" class="article-tag-all">
              <router-link v-for="(item2, index2) in item.tagList" :key="item2.tagId"
                           :to="'/search?activeTab=recommend&activeSearchTypeTab=blog&keyWord=&blogType=&typeName=&blogTag=' + item2.tagName">
                <el-tag :type="tagType[index2]" size="mini" class="article-tag">
                  <el-icon class="el-icon-discount" /> {{ item2.tagName }}
                </el-tag>
              </router-link>
            </div>
            <div class="article-mark">
              <div>
                <svg-icon icon-class="eye-open"/> {{ item['blogRead'] }}
              </div>
              <div>
                <svg-icon icon-class="comment" /> {{ item['blogComment'] }}
              </div>
              <div>
                <span @click="handleOptions(index, 'dvLike', 'blogGoods', 'LIKE')" class="mark-item">
                  <svg-icon v-if="item.dvLike === 1" icon-class="like2" />
                  <svg-icon v-else icon-class="like" />
                </span>
                {{ item['blogGoods'] }} 赞
              </div>
              <div>
                <span @click="handleOptions(index, 'dvDislike', 'blogNoGoods', 'DISLIKE')" class="mark-item">
                  <svg-icon v-if="item.dvDislike === 1" icon-class="dislike2" />
                  <svg-icon v-else icon-class="dislike" />
                </span>
                {{ item['blogNoGoods'] }} 踩
              </div>
              <div>
                <span @click="handleOptions(index, 'dvCollection', 'blogCollection', 'COLLECTION')" class="mark-item">
                  <svg-icon v-if="item.dvCollection === 1" icon-class="star3" />
                  <svg-icon v-else icon-class="star2" />
                </span>
                {{ item['blogCollection'] }} 收藏
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="article-list-container-bottom">
      <div v-if="!dvHasArticle" class="load-more-inactive">我也是有底线的</div>
      <div v-else class="load-more-active" @click="loadMore">查看更多</div>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import { formatToSubDay } from "@/utils/DateUtil";
import { listBlog } from "@/api/blog/article";
import { insertOrUpdateBlogOptions } from "@/api/blog/blogOptions";
@Component({
  methods: { formatToSubDay }
})
export default class index extends Vue {

  @Watch('activeTab')
  handleActiveTabChange(newVal: string, oldVal: string) {
    if (newVal) {
      this.pageNumNow = 0;
      this.articleList = [];
      this.loadMore();
    }
  }

  @Prop()
  private activeTab: any;

  /** 标签颜色 */
  private tagType: any = ['success', 'warning', 'danger', 'info'];

  /** 文章列表 */
  private articleList: any = [];

  /** 分页查询参数,默认总页数大于pageNumNow只影响加载更多显示 */
  private page: any = {
    pageNum: 0,
    pageSize: 10,
    params: {}
  }

  /** 总条数 */
  private totalCount: any = 0;

  /** 总页数 */
  private totalPage: any = 0;

  /** 当前页数 */
  private pageNumNow: number = 0;

  /** 是否还有文章列表 */
  private dvHasArticle: boolean = true;

  private created() {
    this.loadMore();
  }

  /** 加载更多 */
  private loadMore() {
    this.pageNumNow += 1;
    this.page.pageNum = this.pageNumNow;
    this.page.params['activeTab'] = this.activeTab;
    listBlog(this.page).then((res: any) => {
      this.articleList = this.articleList.concat(res.rows);
      this.totalCount = res.total;
      this.totalPage = Math.ceil(res.total/this.page.pageSize);
      this.dvHasArticle = this.totalPage > this.pageNumNow;
    })
  }

  /** 点赞 */
  private handleOptions(index: any, property: string, countProperty: any, type: string) {
    const data = {
      businessType: type,
      blogId: this.articleList[index].id
    }
    insertOrUpdateBlogOptions(data).then((res: any) => {
      this.$modal.msgSuccess(res.msg);
      this.articleList[index][property] = res.data.value;
      this.articleList[index][countProperty] = this.articleList[index][countProperty] + (res.data.value === 1 ? res.data.value : -1);
    })
  }

  /** 按照分类查询 */
  public handleSearch(item: any) {
    this.$router.push({path: '/search?activeTab=recommend&activeSearchTypeTab=blog&keyWord=&blogType=' + item.blogType + '&blogTag=&typeName=' + item.typeName});
  }

  /** 点击用户列表用户卡片 */
  public handleUserCard(userId: any) {
    this.$router.push({path: '/userCenter?userId=' + userId});
  }
}
</script>
<style scoped lang="scss">
.article-list-container {
  width: calc(71% - 10px);
  min-height:600px;
  .article-list-container-main {
    .article-card{
      margin-bottom: 20px;
      position: relative;
      .article-main {
        display: flex;
        flex-direction: row;
        align-items: self-start;
        .article-cover {
          width: 25%;
          height: 130px;
          margin-right: 20px;
          border-radius: 0.25rem;
          box-shadow: 0 2px 5px 0 rgb(0 0 0 / 18%), 0 4px 10px 0 rgb(0 0 0 / 5%);
          overflow: hidden;
          .article-img {
            width: 100%;
            height: 150px;
            object-fit: cover; /* 使图片保持高宽比并填充整个容器 */
            border-radius: 5px;
            transition: all 0.6s;
          }
          .article-img:hover {
            transform: scale(1.2) ;
          }
        }
        .article-container {
          width: 75%;
          min-height: 30px;
          max-height: 350px;
          word-break: break-all;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
        .article-container-cover-none {
          width: 100%;
          min-height: 130px;
          max-height: 170px;
        }
        .article-type{
          position: absolute;
          top: 0;
          right: 20px;
          padding-left: 20px;
          padding-right: 20px;
          text-align: center;
          line-height: 30px;
          background: rgb(114, 171, 255);
          color: white;
          cursor: pointer
        }
        .article-container, .article-container-cover-none {
          .article-title {
            font-size: 18px;
            font-weight: 600;
            color: rgb(95, 95, 95);
            text-align: left;
          }
          .article-remark {
            font-size: 16px;
            font-weight:300;
            color: #575758;
            line-height: 1.8;
            margin-top: 10px;
            margin-bottom: 10px;
            overflow: hidden;
            text-align: left;
            text-overflow: -o-ellipsis-lastline;
            text-overflow: ellipsis;
            display: -webkit-box;
            /*数字 4 代表为超出四行显示省略号*/
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
          }
        }
      }
      .article-bottom {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        .article-tag-mark{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          margin-top: 10px;
          min-height: 40px;
          .article-tag-all{
            margin-right: 20px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            .article-tag {
              margin-right: 8px;
            }
          }
          .article-mark {
            width: 268px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            .mark-item {
              cursor: pointer;
            }
          }
          .article-author {
            height: 40px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            .user-avatar {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              box-shadow: 2px 2px 6px rgba(0,0,0, .12);
              background-color: #ffffff;
              border: 2px solid gold;
              cursor: pointer;
            }
            .demonstration {
              margin: 0 10px 0 5px;
              color: #e8ca2d;
            }
          }
        }
      }
    }
    .article-card:hover {
      margin-top: -2px;
      margin-bottom: 22px;
      transition: all .6s ease;
    }
    .is-always-shadow:hover, {
      box-shadow: 5px 10px 6px rgba(165, 165, 165, 0.7);
    }
  }
  .article-list-container-bottom{
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    .load-more-active {
      font-size: 16px;
      font-weight: 600;
      color: white;
      padding: 5px 10px;
      background: rgb(114, 171, 255);
      border-radius: 20px;
    }
    .load-more-active:hover {
      cursor: pointer;
    }
    .load-more-inactive{
      font-size: 16px;
      font-weight: 600;
    }
  }
  a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #3e4149;
  }
  a:hover {
    color: #3e4149;
  }
}

@media only screen and (max-width: 1300px){
  .article-list-container {
    width: 100%;
  }
}
@media only screen and (max-width: 850px) {
  .article-main {
    flex-direction: column !important;
  }
  .article-cover {
    width: 100% !important;
    height: 200px !important;
    margin-right: 0px !important;
  }
  .article-img {
    width: 100% !important;
    height: 200px !important;
  }
  .article-container {
    width: 100% !important;
    padding-top: 15px;
  }
  .article-container-cover-none {
    max-height: 250px !important;
  }
  .article-tag-mark {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
    max-height: 110px !important;
  }
  .article-remark {
    max-height: 170px !important;
  }
  .article-list-container-bottom {
    margin-bottom: 15px !important;
  }
}
</style>
